<script setup lang="ts">
// import { defineProps } from 'vue';
import { formatNumber } from '@/utils/common';

// 定义 props
const props = defineProps({
    id: {
        type: String,
        required: true,
        default: ''
    },
    name: {
        type: String,
        required: true,
        default: '特大フカヒレの姿煮込み'
    },
    introduction: {
        type: String,
        required: true,
        default:
            'とろけるように柔らかい食感の肉厚な尾びれを、華かな姿煮込みに仕立てました。上海風白湯醤油味と麒麟特製黒トリュフの香りの2種をご用意しております。'
    },
    img_url: {
        type: String,
        required: true,
        default: '/images/delicacy/01.jpg'
    },
    sales_revenue: {
        type: Number,
        // required: true,
        default: 0
    },
    like_count: {
        type: Number,
        // required: true,
        default: 0
    },
    price: {
        type: Number,
        // required: true,
        default: 0
    },
    price_all: {
        type: Number,
        // required: true,
        default: 0
    },
    top_number: {
        type: [Number, null],
        default: null
    },
    is_multi_standard: {
        type: Boolean,
        default: false
    }
});

// 定义 emit
const emit = defineEmits(['onClick']);

const onDetail = () => {
    emit('onClick', { type: 'detail', id: props.id });
};
const onSelect = () => {
    emit('onClick', { type: 'select', id: props.id });
};
</script>

<template>
    <div class="card-wrap aspect-[9/8] border-4 border-[#3C3D40] bg-[#3C3D40] backdrop-blur-2xl" @click="onDetail">
        <div class="card-img relative">
            <img class="aspect-[39/26] w-full object-cover" v-lazy="img_url" alt="cate" />
            <p
                v-if="top_number"
                class="card-top-number absolute top-0 right-0 flex items-center justify-center bg-gradient-to-b from-[#ff6c74] via-[#ff6c74] via-14% to-[#e53039] px-3"
            >
                TOP{{ top_number }}
            </p>
            <p class="card-is-order absolute right-0 bottom-0 flex items-center justify-center px-3.5">注文済み</p>
        </div>
        <div class="px-2">
            <p class="mt-1.5 truncate text-[18px] leading-8">{{ name }}</p>
            <p class="truncate text-[14px] leading-5 text-[#B9B9B9]">{{ introduction }}</p>
            <div class="mt-2 flex gap-2.5 border-b-2 border-[#7171718F] pb-3">
                <span class="inline-block h-5 rounded bg-[rgba(92,92,92,0.33)] px-1 text-[11px] leading-5 text-[#CFCFCF]">
                    月間売上 {{ sales_revenue }}
                </span>
                <p class="flex items-center gap-1 rounded bg-[rgba(92,92,92,0.33)] px-1 text-[11px] leading-none text-[#CFCFCF]">
                    <i class="fantec_font ft_LikeOutlined block !text-[10px]"></i>
                    <span class="leading-none">{{ like_count }}</span>
                </p>
            </div>
            <div class="mt-2 flex h-10 items-center pb-2">
                <p><span>¥</span>{{ formatNumber(price) }}</p>
                <p class="mr-auto">¥{{ formatNumber(price_all) }}<span class="ml-2">(税込)</span></p>
                <a-button v-if="is_multi_standard" class="btn-bg-gradient" type="primary" @click.stop="onSelect">規格を選択</a-button>
                <a-button
                    v-else
                    class="btn-bg-gradient !flex !h-4 !w-4 !min-w-4 items-center justify-center !border-0 !p-0 shadow-none"
                    type="primary"
                    shape="circle"
                    size="small"
                    @click.stop="onSelect"
                >
                    <template #icon>
                        <i class="fantec_font ft_Add !text-[8px] leading-none"></i>
                    </template>
                </a-button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.card-wrap {
    border-radius: calc(var(--scale) * 18px);

    .card-img {
        border-radius: calc(var(--scale) * 18px);
        img {
            border-radius: calc(var(--scale) * 18px);
        }
    }

    .card-top-number {
        min-width: calc(var(--scale) * 65px);
        height: calc(var(--scale) * 30px);
        // background: linear-gradient(180deg, #ff6c74 14%, #e53039 100%);
        border-radius: 0px calc(var(--scale) * 18px);
        font-size: calc(var(--scale) * 15px);
    }

    .card-is-order {
        height: calc(var(--scale) * 24px);
        font-size: calc(var(--scale) * 11px);
        background: rgba(148, 147, 147, 0.6);
        border-radius: calc(var(--scale) * 18px) 0px;
    }
}
</style>
